<!-- Content Header (Page header) -->
<section class="content-header">
	<h1>MySQL-REP配置管理</h1>
	<ol class="breadcrumb">
		<li><a href="#"><i class="fa fa-dashboard"></i>MySQL-REP配置</a>
		</li>
		<li><a href="#"></i>MySQL-REP服务管理</a>
		</li>
	</ol>
</section>
<!-- Main content -->
<section id="container" class="content">
	<div class="row">
		<div class="col-md-12">
			<div class="box box-primary">
				<div class="box-header with-border">
					<h3 class="box-title">查询条件</h3>
					<div class="box-tools pull-right">
						<button id="abc" class="btn btn-box-tool" data-widget="collapse">
							<i class="fa fa-minus"></i>
						</button>
					</div>
				</div>
				<div class="box-body">
					<form action="" id="query_Form">
						<div class="row">
							<div class="col-xs-3">
								<div class="form-group">
									<label for="mycatName">MySQL-REP名称:</label> <input type="text"
										name="name" class="form-control" placeholder="MySQL名称">
								</div>
							</div>
						</div>
					</form>
				</div>
				<div class="box-footer">
					<div class="form-group">
						<div class="col-lg-offset-5 col-lg-2">
							<button class="btn btn-primary" onclick="queryForm('query_Form')">查询</button>
							<button class="btn btn-primary" onclick="resetBtn('query_Form')">重置</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-12">
			<div class="box box-primary">
				<div class="box-header with-border">
					<h3 class="box-title">查询结果</h3>
				</div>

				<div class="box-header">
					<button class="btn btn-success"
						onclick="loadContext('page/manger/myrep_add.html')">新增</button>
					<button class="btn bg-purple"
						onclick="loadContext('page/manger/myrep_add.html','true')">复制新增</button>
				</div>
				<div class="box-body">
					<div>
						<table id="table"></table>
						<div style="text-align:right;">
							<div id="paginator"></div>
						</div>
					</div>
				</div>
				<div class="box-footer">
					<div class="form-group">
						<button class="btn btn-success"
							onclick="loadContext('page/manger/myrep_add.html')">新增</button>
						<button class="btn bg-purple"
							onclick="loadContext('page/manger/myrep_add.html','true')">复制新增</button>
					</div>
				</div>
			</div>
		</div>
	</div>


	<div class="modal fade" id="showInfo" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">修改页面</h4>
				</div>
				<div class="modal-body">

					<form action="" id="modify_form">

						<div class="row">
							<div class="col-xs-6">

								<div class="form-group">
									<input type=hidden id="guid" name="guid" /> <label for="text">名称</label>
									<input id="name" type="text" name="name"
										class="form-control" validateType="lengthRange-1-20|excludeCN"
										placeholder="">
								</div>
								<div class="form-group">
								    <label for="text">主从类型</label>
									<input id="repType" type="text" name="repType"
										class="form-control" validateType="lengthRange-1-20|excludeCN"
										placeholder="">
								</div>
								<div class="form-group">
									<label for="server">所属地区：</label> <input id="zone" type="text"
										name="zone" class="form-control" placeholder=""
										validateType="lengthRange-1-100">
								</div>
								<div class="form-group">
									<label >添加数据库实例</label>
										<select id="mysqlServer"
										 class="selectpicker bla bla bli form-control"  data-live-search="true" >
										</select>
								</div>
								<div style="width: 200%">
									<button class="btn btn-primary" id="addWrite"
										onclick="return false;">增加writeHost</button>
										<button class="btn btn-success" id="addRead"
										onclick="return false;">增加readHost</button>
										<button class="btn btn-info" id="editHost"
										onclick="return false;">编辑名称</button>
										<button class="btn btn-danger" id="removeHost"
										onclick="return false;">删除节点</button>
									<ul id="dataHostTree" class="ztree"></ul>
								</div>
							</div>
							
						</div>

					</form>

				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭
					</button>
					<button id="modify_btn"
						onclick="javascript:updateForm('mySqlRepService','addMyRep','modify_form','updateForm_extra_call');"
						type="button" class="btn btn-primary">修改</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>
</section>
<!-- /.content -->


<script type="text/javascript">
	$.AdminLTE.boxWidget.activate();
</script>
<script type="text/javascript">
	var setting = {
		view : {
			selectedMulti : false
		},
		edit : {
			enable : true,
			showRemoveBtn : false,
			showRenameBtn : false
		},
		data : {
			keep : {
				parent : true,
				leaf : true
			},
			simpleData : {
				enable : true
			}
		}
	};

	var zNodes = [];
	var newCount = 1;
	function add(e) {
		var zTree = $.fn.zTree.getZTreeObj("dataHostTree"), isParent = e.data.isParent, nodes = zTree
				.getSelectedNodes(), treeNode = nodes[0];
		var addNode=$("#mysqlServer").val();		
		if (!isParent) {
			if (treeNode == undefined || (!treeNode.isParent)) {
				alert("请选择相应WriteHost节点");
				return;
			}
			treeNode = zTree.addNodes(treeNode, {
				id : (100 + newCount),
				pId : treeNode.id,
				isParent : isParent,
				name : addNode
			});
		} else {
			treeNode = zTree.addNodes(null, {
				id : (100 + newCount),
				pId : 0,
				isParent : isParent,
				name : addNode
			});
		}
		zTree.editName(treeNode[0]);
	};
	function edit() {
		var zTree = $.fn.zTree.getZTreeObj("dataHostTree"), nodes = zTree
				.getSelectedNodes(), treeNode = nodes[0];
		if (nodes.length == 0) {
			alert("请先选择一个节点");
			return;
		}
		zTree.editName(treeNode);
	};
	function remove(e) {
		var zTree = $.fn.zTree.getZTreeObj("dataHostTree"), nodes = zTree
				.getSelectedNodes(), treeNode = nodes[0];
		if (nodes.length == 0) {
			alert("请先选择一个节点");
			return;
		}
		var callbackFlag = $("#callbackTrigger").attr("checked");
		zTree.removeNode(treeNode, callbackFlag);
	};
	$(document).ready(function() {
		$("#addWrite").bind("click", {
			isParent : true
		}, add);
		$("#addRead").bind("click", {
			isParent : false
		}, add);
		$("#editHost").bind("click", edit);
		$("#removeHost").bind("click", remove);
		$.ajax({
			url:"./dispatcherAction/execute.do?service=mySqlRepService&method=queryAll",
			type: 'POST',
			dataType: "json",
			success: function(data){
				var s=data.attr.list;
				if(s==undefined)
					return; 
				  for(i=0;i<s.length;i++){
					$("#mysqlServer").append(
					"<option value='"+ s[i]+"'>"+ s[i]+ "</option>");
				} 
				$("#mysqlServer").selectpicker({noneSelectedText:'请选择'}); 
			}
		});
	});
</script>
<script type="text/javascript">
	function ready4Update_extra_call(modifyForm_obj, row, attr_) {
		if (attr_ == 'value') {
			var value_obj = jQuery.parseJSON(row[attr_]);
			for ( var obj_attr in value_obj) {
			
				modifyForm_obj.find("[name='" + obj_attr + "']").val(
						[ '' + value_obj[obj_attr] ]);
			}
		}
		if(attr_=='rep'){
		 var node=[];
		 for(var i=1;i<=row[attr_].length;i++){
		 	var writeHost=row[attr_][i-1]['writeHost'];
		 	var w=new Object();
		 	w.pId=0;w.id=i;w.name=writeHost;
		 	node.push(w);
		 	var readHosts=row[attr_][i-1]['readHosts'];
		 	if(readHosts!=undefined&&readHosts!=null) {
		 		var rs = readHosts.split(',');  
		 		for(var j=1;j<=rs.length;j++){
		 			var r=new Object();
		 			r.pId=i;r.id=i*100000+j;r.name=rs[j-1];
		 			node.push(r);
		 		}
		 	}
		 }
		$.fn.zTree.init($("#dataHostTree"), setting, node);
		}
	}

	function updateForm_extra_call(form_id, data) {
		var zTree = $.fn.zTree.getZTreeObj("dataHostTree");
		var nodes = zTree.getNodes();
		var value_obj = {};
		value_obj.guid = data.guid;
		value_obj.name= data.name;
		value_obj.zone = data.zone;
		value_obj.repType = data.repType;
		data.value = JSON.stringify(value_obj);
		data.ztree = JSON.stringify(nodes);
	}
	$(document)
			.ready(
					function() {
						var cols = [
								{
									title : '操作',
									name : 'operation',
									width : 100,
									align : 'center',
									renderer : function(val, item, rowIndex) {
										return '<button  class="btn btn-primary btn-xs modify"  onclick=ready4Update("'
												+ item.guid
												+ '","showInfo","ready4Update_extra_call")>修改</button>&nbsp;'
												+ '<button class="btn btn-danger btn-xs" onclick=delObj("mySqlRepService","deleteMyRep","'
												+ item.guid
												+ '")>删除</button>&nbsp;';
									}
								}, {
									title : '名称',
									name : 'name',
									width : 200,
									align : 'center'
								}, {
									title : '主从类型',
									name : 'repType',
									width : 200,
									align : 'center'
								}, {
									title : '地区',
									name : 'zone',
									width : 200,
									align : 'center'
								} ];
						mmgrid = $('#table')
								.mmGrid(
										{
											indexCol : true,
											height : '400',
											indexColWidth : 35,
											cols : cols,
											url : './dispatcherAction/queryByMMGrid.do?service=mySqlRepService&method=queryByRepPage',
											method : 'post',
											root : 'items',
											plugins : [ $('#paginator')
													.mmPaginator() ]
										});
					});
</script>

